<template>
	<view class="content">

		<map id="mapId" @markertap="clickmarke" class="map" scale="11.5" circles="true" :latitude="mapList.latitude"
			:longitude="mapList.longitude" :markers="markers" show-location="true"></map>

		<view class="contBox" v-if="contshow">
			<image mode="aspectFit" class="contl" :src="storeDetail.activity_logo">
			</image>
			<view class="contr">
				<view class="name">{{storeDetail.activity_name}}</view>
				<view class="desc">{{storeDetail.address}}</view>
				<navigator :url="'/pages/index/details?store_id='+mid">
					<view class="btn">查看详情</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapList: [],
				storeDetail: '',
				markers: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				mid: '',
				contshow: false,
			}
		},
		onLoad() {
			var that = this;
			that.API_mapList();
		},
		methods: {
			clickmarke(e) {
				var that = this;
				var mid = e.detail.markerId;
				this.mid = mid;
				this.API_storeDetail(mid)

			},

			API_mapList() {
				var that = this;
				that.ran
					.request('index/Home/mapList', {})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							that.mapList = res.data;
							that.markers = res.data.markers;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			API_storeDetail(store_id) {
				var that = this;
				that.ran
					.request('index/Home/storeDetail', {
						store_id: store_id,
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							that.storeDetail = res.data;
							that.contshow = true;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.contBox {
		width: 700rpx;
		background: #fff;
		position: fixed;
		bottom: 30rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
		overflow: hidden;

		.contr {
			float: left;
			width: 360rpx;
			padding: 20rpx;

			.name {
				line-height: 40rpx;
				height: 40rpx;
				text-align: justify;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.desc {
				color: #666;
				font-size: 26rpx;
				line-height: 40rpx;
				height: 40rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin: 10rpx 0;
			}

			.btn {
				width: 300rpx;
				border-radius: 10rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				font-size: 26rpx;
				background: #0eb4f0;
			}
		}

		.contl {
			width: 300rpx;
			height: 200rpx;
			float: left;
		}
	}

	.map {
		width: 100vw;
		height: 100vh;
	}
</style>